window.addEventListener('load', function () {
    var arrow_l = document.querySelector('.arrow_l');
    var arrow_r = document.querySelector('.arrow_r');
    var banner = document.querySelector('.banner');
    var bannerWidth = banner.offsetWidth;

    banner.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    banner.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(() => {
            arrow_r.click();
        }, 2000);
    })


    // 动态生成小圆圈  有几张图就有几个 小圆圈
    var ul = banner.querySelector('ul');
    var ol = banner.querySelector('ol');
    for (var i = 0; i < ul.children.length; i++) {
        // 创建 li 
        var li = document.createElement('li');
        // 记录当前小圆圈得索引号
        li.setAttribute('index', i);
        // 把 li 插入到 ol里
        ol.appendChild(li);


        // 小圆圈排他思想
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            // 当我们点击了  li  就拿到当前的索引号
            var index = this.getAttribute('index');
            num = index;
            circle = index;


            // ul  移动距离  小圆圈的索引号  乘以  图片宽度
            animate(ul, -index * bannerWidth);
        })
    }
    // 克隆第一张图片
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    ol.children[0].className = 'current';
    // 点击右侧按钮  图片轮播
    num = 0;
    // circle 控制小圆圈移动
    circle = 0;


    arrow_r.addEventListener('click', function () {
        // 无缝滚动
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0
        }
        num++
        animate(ul, -num * bannerWidth);
        circle++
        // 如果  circle 等于四 说明到克隆的图片  就复原
        if (circle == ol.children.length) {
            circle = 0;
        }
        // 想清除所有  属性
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    })


    arrow_l.addEventListener('click', function () {
        // 无缝滚动
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * bannerWidth;

        }
        num--
        animate(ul, -num * bannerWidth);
        circle--
        // 如果  circle 等于四 说明到克隆的图片  就复原
        if (circle < 0) {
            circle = ol.children.length - 1;
        }
        // 想清除所有  属性
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    })
    // 自动播放功能
    var timer = setInterval(() => {
        arrow_r.click();
    }, 2000);
    // 返回顶部
    // 获取  main  里顶部的距离
    var Topbox = $("main").offset().top;
    $(window).scroll(function () {
        // $(document).scrollTop();

        if ($(document).scrollTop() >= Topbox) {
            $(".back_to_top span").fadeIn();
            $(".back_to_top span").css("position", "fixed")
        } else ($(".back_to_top span").fadeOut())
    })
    $(".back_to_top span").click(function () {
        $("body,html").stop().animate({
            scrollTop: 0
        })
    })
    // 倒计时
    var day = document.querySelector('.day');
    var hour = document.querySelector('.hour');
    var minute = document.querySelector('.minute');
    var second = document.querySelector('.second');
    countDate();  //先调用一次这个函数  防止第一次刷新页面有空白
    var inputTime = +new Date('2022 /12 /31');   // 返回的是用户输入时间总的毫秒数  
    //开启定时器
    setInterval(countDate, 1000);

    function countDate() {
        var nowTime = +new Date();    //返回的是当前时间总的毫秒数 
        var times = (inputTime - nowTime) / 1000;   //times 是剩余的时间总的秒数
        var d = parseInt(times / 60 / 60 / 24);  // 天
        d = d < 10 ? '0' + d : d;
        day.innerHTML = d;
        var h = parseInt(times / 60 / 60 % 24);  //小时
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;
        var m = parseInt(times / 60 % 60);  //分
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60);  //秒
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
    }

})



$.ajax({
    type: 'GET',
    url: '/news',

    success: function (res) {
        console.log(res);

        let htmlBox;

        res.forEach(itme => {
            // console.log(itme);

            let html = `<div class="new_list">
            <div class="new_list_pic">
                <img src="${itme.iamge}" alt="">
            </div>
            <div class="new_list_title">
                <h2> ${itme.title}</h2>
                <p> ${itme.description} </p>
                <span> ${itme.content}</span>
            </div>
        </div>`
            htmlBox += html;

        });
        $('.new_box').html(htmlBox);
    },
    error: function (err) {
        console.log(err);
    }
})



let btn = $('#btn');



btn.click(function () {
    var name = $('.name').val();
    var visiting_date = $('.visiting_date').val();
    var contact_information = $('.contact_information').val();
    var attendees_number = $('.attendees_number').val();
    if (name == "") {
        alert('请输入名字')
        return;
    }
    if (visiting_date == "") {
        alert('请输入时间')
        return;
    }
    if (contact_information == "") {
        alert('请输入联系方式')
        return;
    }
    if (attendees_number <= 0 || attendees_number == "") {
        alert('请输入订票张数')
        return;
    }
    let obj = {
        name,
        visiting_date,
        contact_information,
        attendees_number
    }
    $.ajax({
        type: 'PUT',
        url: '/tickets',
        data: obj,
        success: function (res) {
            console.log(res);
        },
        error: function (err) {
            console.log(err);
        }
    })
})
